<div class="panel panel-default">
    <div class="panel-heading">
        <i class=" icon-home"></i> <strong class='text-primary'>{{app}}</strong>应用大盘
    </div>
    <div class="panel-body">
        <div class="row" style="padding-bottom: 10px;">
            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12">
                <div  isteven-multi-select
                      input-model="serviceGroup"
                      output-model="services"
                      button-label="name"
                      item-label="name"
                      tick-property="ticked"
                      max-labels="2"
                      orientation="horizontal"
                      group-property="serviceGroup">
                </div>
            </div>
        </div>
        <div class="row"  style="padding-bottom: 10px;">
            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12">
                <span class="label {{dayRange==30?'label-warning':'label-default'}} can-click" ng-click="switchTimeRange(30)">一个月以内</span>
                <span class="label {{dayRange==21?'label-warning':'label-primary'}}  can-click" ng-click="switchTimeRange(21)">三周以内</span>
                <span class="label  {{dayRange==14?'label-warning':'label-primary'}} can-click" ng-click="switchTimeRange(14)">两周以内</span>
                <span class="label {{dayRange==7?'label-warning':'label-primary'}}    can-click"  ng-click="switchTimeRange(7)">一周以内</span>
                <span class="label  {{dayRange==6?'label-warning':'label-info'}}  can-click" ng-click="switchTimeRange(6)">6天以内</span>
                <span class="label  {{dayRange==5?'label-warning':'label-info'}}   can-click" ng-click="switchTimeRange(5)">5天以内</span>
                <span class="label {{dayRange==4?'label-warning':'label-info'}}  can-click" ng-click="switchTimeRange(4)">4天以内</span>
                <span class="label  {{dayRange==3?'label-warning':'label-info'}}  can-click" ng-click="switchTimeRange(3)">3天以内</span>
                <span class="label  {{dayRange==2?'label-warning':'label-info'}} can-click" ng-click="switchTimeRange(2)">2天以内</span>
                <span class="label  {{dayRange==1?'label-warning':'label-danger'}} can-click" ng-click="switchTimeRange(1)">一天以内</span>
            </div>
        </div>
        <div class="row"  ng-repeat="service in services">
            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12 service-overview">
                <div class="row" ng-if="$index%3===0" ng-init="group=services.slice($index,$index+3)">
                    <div class="col-md-4 col-xs-4 col-lg-4 col-sm-4" ng-repeat="service in group">
                        <div class="panel panel-success">
                            <div class="panel-body">
                                <div class="caption">
                                    <strong><span ng-if="service.remoteType==='CONSUMER'" title="提供服务" class="label  label-primary">P</span><span ng-if="service.remoteType==='PROVIDER'"  title="消费服务" class="label label-warning">C</span>&nbsp;<a href="#/monitor/{{app}}/{{service.name}}/{{dayRange}}/service/top200.html" title="查看{{service.name}}服务top200信息">{{service.name | formatInterfaceName}}</a></strong>
                                    <p>
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <span class="badge">{{service.maxConcurrent}}</span>
                                            最大并发数：
                                        </li>
                                        <li class="list-group-item">
                                            <span class="badge">{{service.maxElapsed}}</span>
                                            最大耗时(ms)：
                                        </li>
                                        <li class="list-group-item">
                                            <span class="badge">{{service.maxFault}}</span>
                                            最大失败次数：
                                        </li>
                                        <li class="list-group-item">
                                            <span class="badge">{{service.maxSuccess}}</span>
                                            最大成功次数：
                                        </li>
                                    </ul>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
               <!-- <div class="panel {{service.remoteType=='CONSUMER'?'panel-success':'panel-info'}}">
                    <div class="panel-heading"><i class="glyphicon glyphicon-th-large"></i> {{service.remoteType=='CONSUMER'?'发布的服务':'订阅的服务'}}{{service.name}} <span style="float: right;cursor: pointer;" full-screen target-class="'service-overview'"><a href="#/monitor/{{app}}/{{service.name}}/overview" class="{{service.remoteType=='CONSUMER'?'white-color':''}}">详细信息&gt;&gt;</a>&nbsp;&nbsp;<i class="glyphicon {{service.show?'glyphicon-chevron-up':'glyphicon-chevron-down'}}"  ng-click="toggleAppCharts(service)"></i></span></div>
                    <div class="panel-body" ng-show="service.show">
                        <div class="row">
                            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12">
                                <ul class="nav nav-tabs">
                                    <li role="presentation" ng-click="switchView(service,'chart')" class="{{service.showType=='chart'?'active':''}} can-click"><a href="javascript:void(0);">图表</a></li>
                                    <li role="presentation" ng-click="switchView(service,'elapsed')" class="{{service.showType=='elapsed'?'active':''}} can-click"><a href="javascript:void(0);">耗时详细列表</a></li>
                                    <li role="presentation" ng-click="switchView(service,'concurrent')" class="{{service.showType=='concurrent'?'active':''}} can-click"><a href="javascript:void(0);">并发详细列表</a></li>
                                    <li role="presentation" ng-click="switchView(service,'fault')" class="{{service.showType=='fault'?'active':''}} can-click"><a href="javascript:void(0);">失败详细列表</a></li>
                                    <li role="presentation" ng-click="switchView(service,'success')" class="{{service.showType=='success'?'active':''}} can-click"><a href="javascript:void(0);">成功详细列表</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="row" ng-show="service.showType=='chart'">
                            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12 max-view-height">
                                <div class="row" >
                                    <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6">
                                        <line-chart chart-options="service.elapsed"></line-chart>
                                    </div>
                                    <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6">
                                        <line-chart chart-options="service.concurrent"></line-chart>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6">
                                        <line-chart chart-options="service.fault"></line-chart>
                                    </div>
                                    <div class="col-md-6 col-xs-6 col-lg-6 col-sm-6">
                                        <line-chart chart-options="service.success"></line-chart>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" ng-show="service.showType=='elapsed'">
                            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12 max-view-height">
                                <table class="table table-hover table-condensed">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>消耗时间(ms)</th>
                                        <th>方法名称</th>
                                        <th>触发时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="{{elapsed.remoteType=='CONSUMER'?'success':''}}" title="{{elapsed.remoteType=='CONSUMER'?'提供端':'消费端'}}" ng-repeat="elapsed in service.overview.elapsedItems">
                                        <td>{{$index+1}}</td>
                                        <td>{{elapsed.elapsed}}</td>
                                        <td>{{elapsed.method}}</td>
                                        <td>{{elapsed.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row" ng-show="service.showType=='concurrent' ">
                            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12 max-view-height">
                                <table class="table table-hover table-condensed">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>并发数量</th>
                                        <th>方法名称</th>
                                        <th>触发时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="{{concurrent.remoteType=='CONSUMER'?'success':''}}"  title="{{concurrent.remoteType=='CONSUMER'?'提供端':'消费端'}}"  ng-repeat="concurrent in service.overview.concurrentItems">
                                        <td>{{$index+1}}</td>
                                        <td>{{concurrent.concurrent}}</td>
                                        <td>{{concurrent.method}}</td>
                                        <td>{{concurrent.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row" ng-show="service.showType=='fault'">
                            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12 max-view-height">
                                <table class="table table-hover table-condensed">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>失败数量</th>
                                        <th>方法名称</th>
                                        <th>触发时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="{{fault.remoteType=='CONSUMER'?'success':''}}"  title="{{fault.remoteType=='CONSUMER'?'提供端':'消费端'}}"  ng-repeat="fault in service.overview.faultItems">
                                        <td>{{$index+1}}</td>
                                        <td>{{fault.fault}}</td>
                                        <td>{{fault.method}}</td>
                                        <td>{{fault.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row" ng-show="service.showType=='success'">
                            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12 max-view-height">
                                <table class="table table-hover table-condensed">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>成功数量</th>
                                        <th>方法名称</th>
                                        <th>触发时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="{{success.remoteType=='CONSUMER'?'success':''}}"  title="{{success.remoteType=='CONSUMER'?'提供端':'消费端'}}"  ng-repeat="success in service.overview.successItems">
                                        <td>{{$index+1}}</td>
                                        <td>{{success.success}}</td>
                                        <td>{{success.method}}</td>
                                        <td>{{success.timestamp | date : 'MM-dd hh:mm:ss'}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>-->
            </div>
        </div>
    </div>
</div>